<template>
    <div class="container">
          <div class="title">
              <dv-border-box-3 :color="['#FFE4E1','#FFB3E6']" style="color: aliceblue;font-size:50px ;">
                全国各城市生产总值排名
              </dv-border-box-3>
          </div>
          <dv-border-box-8 color class="list">
              <ul>
                <li>
                    <router-link to="/home" class="link" style="color:blanchedalmond;">首页</router-link>
                </li>
                <li>
                    <router-link to="/year_value_ral" class="link" style="color: aquamarine;">生产总值与年份的关系</router-link>
                </li>
                <li>
                    <router-link to="/houseprice_tendency"class="link" style="color: lightpink;">各城市房价变化趋势</router-link>
                </li>
                <li>
                    <router-link to="/peoplenum_value_ral"class="link" style="color: darkturquoise;">居民数量与生产总值的关系</router-link>
                </li>
                <li>
                    <router-link to="/city_bdinvestment_rank"class="link" style="color: coral;">各城市房地产投资金额</router-link>
                </li>
                <li>
                    <router-link to="/avgwage_depbalance_ral"class="link" style="color: goldenrod;">居民平均工资与存款的关系</router-link>
                </li>
                <li>
                  <router-link to="/City_Value_Rank"class="link" style="color: slateblue;">全国各城市生产总值排名</router-link>
              </li>
              <li>
                  <router-link to="/income_expenses_ral"class="link" style="color: thistle;">地方支出与收入的关系</router-link>
              </li>
      
          </ul>
          </dv-border-box-8>
          <div class="body">
                <dv-border-box-1>
                    <dv-capsule-chart :config="config" id="dcc" />
                </dv-border-box-1>
          </div>
    </div>
  </template>
      
  <script setup>
import { onMounted,reactive,  } from 'vue';
import axios from 'axios';
  

  
  const config = reactive({
    data:[],
    unit:"亿元",
    showValue: true
  })

  function getData(){
    axios.get('/api/queryAllcity_Value_Rank')
    .then((response)=>{
    console.log(response.data)
    if(response.data.code==200){
    let obj = reactive({})
    for(let index=0;index<response.data.data.length-3;index++){
        let yobj = response.data.data[index];
        obj = {
        name: yobj.city,
        value: yobj.outputvalue
        }
    config.data.push(obj)
     }
    }
    })
}
  onMounted(()=>{
    getData();
  })
  
      
  </script>
      
  <style scoped>
  .container{
      background-image: url('../imgs/bg.png');
      width: 100vw;
      height: 100vh;
      background-size: cover;
      position: absolute;
      left: 0;
      top: 0;
  }
  .title{
      height: 100px;
      width: 100vw;

      text-align: center;
      font-size: 50px;
  }
  .list{
    height: 100px;
    width: 100vw;


}
li{
    flex: 1;
    text-align: center;
}
ul{
    display: flex;
    justify-content: space-between;
    list-style-type: none;
}
.link{
    color: aliceblue;
    text-decoration: none;
    line-height: 100px;
    transition: background-color 0.3s;
    border-radius: 5px;
    
}
.link:hover{
    color: red;
    background-color: pink;
}   
.body{
    width: 100vw;
    height: 830px;
} 
#dcc{
    width:1670px;
    height: 800px;
}
  </style>